<template>
  <!-- 最外层盒子 -->
  <div class="clock_a_box">
    <!-- 钟表主体 -->
    <div class="clock">
      <!-- 钟表圆心 -->
      <div class="center_circle">
        <div class="circle"></div>
        <!-- 钟表指针 -->
        <div
          class="hourhand"
          :style="`transform: translateX(-50%) rotate(${hD}deg);`"
        ></div>
        <div
          class="minutehand"
          :style="`transform: translateX(-50%) rotate(${mD}deg);`"
        ></div>
        <div
          class="secondhand"
          :style="`transform: translateX(-50%) rotate(${sD}deg);`"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount } from "vue";
export default {
  name: "SimpleClockA",
  setup() {
    const date = new Date();
    //钟表指针初始化角度
    let hD = ref(0);
    let mD = ref(0);
    let sD = ref(0);

    //设置钟表为当前系统时间
    onMounted(() => {
      hD.value = (360 / 12) * (date.getHours() - 12);
      mD.value = (360 / 60) * date.getMinutes();
      sD.value = (360 / 60) * date.getSeconds();
      clockhandRotate(false);
    });

    //钟表指针实时转动
    function clockhandRotate(stop) {
      let handRotate = setInterval(() => {
        if (sD.value >= 21600) {
          sD.value = 0;
          mD.value = 0;
          hD.value = 0;
        }
        sD.value += 6;
        mD.value += 6 / 60;
        hD.value += 6 / 3600;
      }, 1000);
      if (stop) return clearInterval(handRotate);
    }

    //卸载组件前关闭定时器
    onBeforeUnmount(() => {
      clockhandRotate(true);
    });

    return {
      hD,
      mD,
      sD,
    };
  },
};
</script>

<style scoped lang="css">
/* 最外层盒子 */
.clock_a_box {
  position: relative;
  top: 100px;
  left: 50%;
  width: 300px;
  height: 300px;
  transform: translateX(-50%);
  background-color: transparent;
}
/* 钟表主体 */
.clock_a_box .clock {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 10px solid rgb(209, 209, 209);
  box-shadow: 0px 0px 15px 2px rgb(146, 146, 146) inset,
    15px 15px 55px -14px rgb(73, 73, 73);
  background-color: rgb(228, 228, 228);
  box-sizing: border-box;
}
/* 钟表圆心 */
.clock_a_box .clock .center_circle {
  position: relative;
  top: 50%;
  left: 50%;
  width: 8%;
  height: 8%;
  border-radius: 50%;
  box-shadow: 0px 0px 10px 2px rgb(146, 146, 146);
  background-color: rgb(209, 209, 209);
  transform: translate(-50%, -50%);
}
.clock_a_box .clock .center_circle .circle {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 25%;
  height: 25%;
  border-radius: 50%;
  background-color: rgb(75, 75, 75);
  transform: translate(-50%, -50%);
}
/* 钟表指针 */
.clock_a_box .clock .center_circle .hourhand,
.clock_a_box .clock .center_circle .minutehand,
.clock_a_box .clock .center_circle .secondhand {
  position: absolute;
  z-index: 1;
  left: 50%;
  box-shadow: 0px 0px 5px 1px rgb(146, 146, 146);
}
.clock_a_box .clock .center_circle .hourhand {
  top: -218%;
  width: 42%;
  height: 350%;
  border-radius: 50%;
  background-color: rgb(27, 120, 226);
  transform-origin: 50% 77%;
}
.clock_a_box .clock .center_circle .minutehand {
  top: -308%;
  width: 42%;
  height: 444%;
  border-radius: 50%;
  background-color: rgb(141, 194, 255);
  transform-origin: 50% 81%;
}
.clock_a_box .clock .center_circle .secondhand {
  top: -440%;
  width: 10%;
  height: 665%;
  border-radius: 15px;
  background-color: rgb(255, 130, 58);
  transform-origin: 50% 74%;
}
</style>